<template>
  <div id="container">
    <el-row>
      <h1><i class="el-icon-eleme"></i>{{name}}</h1>
    </el-row>
    <el-row>
      <el-button type="primary"@click="toadd"icon="el-icon-search">添加</el-button>
    </el-row>
    <el-row>
      <el-table :data="list"style="width: 100%;">
        <el-table-column prop="title"label="标题"width="200"header-align="center"/>
        <el-table-column prop="sellpoint"label="卖点"width="200"header-align="center"/>
        <el-table-column prop="price"label="价格"width="200"header-align="center"/>
        <el-table-column prop="intro"label="说明"width="200"header-align="center"/>

        <el-table-column label="[操作]" width="220" header-align="center">
          <template slot-scope="s">
             <el-button type="success" @click="toupdate(s.$index, s.row)" icon="el-icon-check">修改</el-button>
             <el-button type="danger" @click="del(s.$index)" icon="el-icon-close">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog title="提示" :visible.sync="dialogVisible"width="30%">
      <span>
        <el-form :model="m"label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="m.title"/>
        </el-form-item>
        <el-form-item label="卖点">
          <el-input v-model="m.sellpoint"/>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="m.price"/>
        </el-form-item>
        <el-form-item label="说明">
          <el-input type="textrea"v-model="m.intro"/>
        </el-form-item>
        </el-form>
      </span>
      <span slot="footer"class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button @click="save">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    name:"item1",
    data(){
      return{
        name:"京东电商平台",
        dialogVisible:false,
        isupdate:false,
        index:null,
        m:{
          title:null,
          sellpoint:null,
          price:null,
          intro:null
        },
        list:[{
          title:"零基础学Java",
          sellpoint:"明日科技（MingRi Soft） 著，明日科技 编 ",
          price:40.50,
          intro:"零基础自学编程的入门图书，由浅入深，详解Java语言的编程思想和核心技术，配同步视频教程和源代码，海量资源免费赠送团购热线010-89113777"
        },
        {
          title:"Java从入门到精通（第5版）",
          sellpoint:"明日科技 著，javascript:void（0）; 注 ",
          price:47.50,
          intro:"297个应用实例+37个典型应用+30小时教学视频+海量开发资源库，丛书累计销量200多万册团购热线010-89113777"
        },
        {
          title:"Java编程思想（第4版）",
          sellpoint:"[美] Bruce Eckel 著，陈昊鹏 译 ",
          price:76.70,
          intro:"Java学习必读经典,殿堂级著作！赢得了全球程序员的广泛赞誉 团购热线010-89113777"
        },
        {
          title:"深入理解Java虚拟机：JVM高级特性与最佳实践",
          sellpoint:"周志明 著 ",
          price:91.20,
          intro:"周志明JVM新作，新增内容近50%，大厂面试知识点全覆盖。与《Java编程思想、EffectiveJava、Java核心技术》堪称“Java四大名著”"
        },
        {
          title:"java核心技术卷1基础知识 卷II 高级特性（原书第11版） 中文版（卷1+卷2）",
          sellpoint:"[美] 凯·S.霍斯特曼 著 ",
          price:189.00,
          intro:"京 东 价￥ 189.00 [6.3折] [定价  ￥298.00] 降价通知"
        },
        ]
      }
    },
        methods: {
          toadd: function() {
            //防止数据已经有值，干扰，清空数据
            this.m = {};

            //展现对话框，要调用数据区中数据，加this
            this.dialogVisible = true;
            this.isUpdate = false;
          },
          toupdate: function(index, row) {  //形参
            //获取当前数据，回显：对话框中数据form表单，表单是和m绑定
            //this.m = row;   //row和m是一个引用！！一个改全都改。解决办法：把它们关系取消，不是同一个引用
            this.m = JSON.parse(JSON.stringify(row)); //m和row就没有关系了

            this.dialogVisible = true;
            this.isUpdate = true;
            this.index = index; //前面的index是全局参数，数据区中定义的；后面index是toupdate的参数
          },
          save: function() { //这个方法复用，新增和修改都使用它
            if (!this.isUpdate) {  //!取反，!true=false,!false=true；
              //在list数组中新增元素
              this.list.splice(0, 0, this.m);
            }else{
              //修改，index怎么来？在修改按钮通过插槽传入index，可以设置全局变量，来记录这个值
              //1.数据区：index变量，2.修改按钮，设置index，3.在这获取数据区index
              this.list.splice(this.index, 1, this.m);
            }
            this.dialogVisible = false;
          },
          del: function(index) {
            //通过插槽vue+element-ui提供，它就把index索引值传递过来
            //删除指定数组的索引值，删除1个
            this.list.splice(index, 1);
          }

    }
  }

</script>

<style>
  textarea{
    font-family: "微软雅黑";
  }
</style>
